
<div style="POSITION: relative" id="content">
<h3>easyUI 添加ComboTree 字段到一个 form </h3>
<div id="article_content" class="article_content">
  <p>ComboBox 和一个下拉的tree,可以使用最为一个form字段,可以提交给远程服务器.<br>
  </p>
  <p>在这个教程中我们将要创建一个注册的form有一个name,address,city字段,city
    字段是一个combotree 字段,在里面用户可以下拉tree panel和选择一个特定的city.</p>
  <p><img src="documentation/images/1344911961_9909.png" alt=""></p>
<h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建 Form</h4>
  <div>
    <pre name="code" class="html">&lt;div id=&quot;dlg&quot; class=&quot;easyui-dialog&quot; style=&quot;width:500px;height:250px;padding:10px 30px;&quot;  
        title=&quot;Register&quot; buttons=&quot;#dlg-buttons&quot;&gt;  
    &lt;h2&gt;Account Information&lt;/h2&gt;  
    &lt;form id=&quot;ff&quot; method=&quot;post&quot;&gt;  
        &lt;table&gt;  
            &lt;tr&gt;  
                &lt;td&gt;Name:&lt;/td&gt;  
                &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name&quot; style=&quot;width:350px;&quot;/&gt;&lt;/td&gt;  
            &lt;/tr&gt;  
            &lt;tr&gt;  
                &lt;td&gt;Address:&lt;/td&gt;  
                &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;address&quot; style=&quot;width:350px;&quot;/&gt;&lt;/td&gt;  
            &lt;/tr&gt;  
            &lt;tr&gt;  
                &lt;td&gt;City:&lt;/td&gt;  
                &lt;td&gt;&lt;select class=&quot;easyui-combotree&quot; url=&quot;data/city_data.json&quot; name=&quot;city&quot; style=&quot;width:156px;&quot;/&gt;&lt;/td&gt;  
            &lt;/tr&gt;  
        &lt;/table&gt;  
    &lt;/form&gt;  
&lt;/div&gt;  
&lt;div id=&quot;dlg-buttons&quot;&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-ok&quot; onclick=&quot;savereg()&quot;&gt;Submit&lt;/a&gt;  
    &lt;a href=&quot;#&quot; class=&quot;easyui-linkbutton&quot; iconCls=&quot;icon-cancel&quot; onclick=&quot;javascript:$('#dlg').dialog('close')&quot;&gt;Cancel&lt;/a&gt;  
&lt;/div&gt;  </pre>
    看以上代码,我们为一个combotree 字段名字是'city'设置一个url属性,这个字段可以从远程服务器检索tree数据,注意这个字段有一个样式名字叫&nbsp;'easyui-combotree',所以我们不需要写任何的js代码,combotree
    字段将自动渲染.</div>
  <div>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载 &nbsp;EasyUI示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/form/downloads/easyui-form2-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-form-demo.zip</a></div>
    <br>
  </div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>